<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="poster">
        <div id="poster1"><img src="images/poster1.png" /></div>
        <div id="poster2"><img src="images/poster2.png" /></div>
        <div id="poster3"><img src="images/poster3.png" /></div>
        <div id="poster4"><img src="images/poster4.png" /></div>
        <div id="poster5"><img src="images/poster5.png" /></div>
        <div id="poster6"><img src="images/poster6.png" /></div>
        <div id="poster7"><img src="images/poster7.png" /></div>
        <div id="poster8"><img src="images/poster8.png" /></div>
    </div>
    <script>
        function showPoster(id){
            var posterNow = document.getElementById('poster'+id);
            for(var i=1;i<9;i++){
                if(i!=id){
                    var otherPoster = document.getElementById('poster'+i);
                    otherPoster.style.display = "none";
                }
                posterNow.style.display = "block";
            }
        }
        var index = 1;
        function autoChange(){
            if(index==9){
                index = 1;
            }
            showPoster(index);
            index++;
            setTimeout(autoChange,1000);
        }
        

        autoChange();
        // setInterval(autoChange,1000)
    </script>
</body>
</html>